<template>
  <view class="order-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image class="back-icon" src="/static/Images/order/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="page-title">订单详情</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 订单状态 -->
    <view class="order-status-card">
      <view class="status-info">
        <view class="status-text">{{ statusInfo.text }}</view>
        <view class="auto-receive-text">{{ statusInfo.autoReceiveText }}</view>
      </view>
      <view class="status-image">
        <image class="delivery-image" src="/static/Images/order/Huoche.png" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 充值进度 -->
    <view class="recharge-progress-card">
      <!-- 显示进度步骤 -->
      <view 
        v-for="(step, index) in statusInfo.progressSteps" 
        :key="index" 
        :class="['progress-item', step.status]"
      >
        <view class="progress-icon">
          <image 
            class="status-icon" 
            :src="getStatusIcon(step.status)" 
            mode="aspectFit"
          ></image>
        </view>
        <view class="progress-content">
          <view class="progress-title">{{ step.title }}</view>
          <view class="progress-time">{{ step.time || '待处理' }}</view>
        </view>
      </view>
    </view>
    <!-- 订单信息 -->
    <view class="order-info-card">
      <!-- 商品信息容器 -->
      <view class="product-container">
        <!-- 商品缩略图 -->
        <view class="product-image">
          <image 
            :src="(productInfo && productInfo.imgs && productInfo.imgs.length > 0) ? productInfo.imgs[0] : '/static/Images/default-product.png'" 
            mode="aspectFill"
            class="product-thumb"
          />
        </view>
        <!-- 商品名称 -->
        <view class="product-details">
          <view class="product-name">{{ productInfo ? productInfo.goods_name : '商品信息加载中...' }}</view>
        </view>
      </view>
      <view class="info-item">
        <view class="info-label">实付金额:</view>
        <view class="info-value price">¥{{ orderInfo.amount }}</view>
      </view>
      
      <!-- 卡密订单相关信息 -->
      <template v-if="orderData && orderData.type == 2 && orderData.carmines && orderData.carmines.length > 0">
        <!-- 遍历卡密组（二维数组的第一层） -->
        <view class="card-group" v-for="(carmineGroup, groupIndex) in orderData.carmines" :key="groupIndex">
          <!-- 遍历每组中的卡密（二维数组的第二层） -->
          <view class="card-item-row" v-for="(carmine, cardIndex) in carmineGroup" :key="`${groupIndex}-${cardIndex}`">
            <!-- 卡号信息 -->
            <view class="info-item" v-if="carmine.card_no">
              <view class="info-label">充值卡号:</view>
              <view class="info-value card-secret">{{ carmine.card_no }}</view>
              <view class="action-buttons">
                <view class="copy-btn" @click.stop="handleCardNoCopy(carmine)">
                  <image class="copy-icon" src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>
            
            <!-- 卡密信息 -->
            <view class="info-item">
              <view class="info-label">卡密信息:</view>
              <view class="info-value card-secret">{{ getDisplayCardInfo(carmine, viewedCards.includes(carmine.id || `${groupIndex}-${cardIndex}`), 'carmine') }}</view>
              <view class="action-buttons">
                <!-- status不等于4时：先显示倒计时，倒计时结束后显示隐藏按钮，点击后显示复制按钮 -->
                <template v-if="orderData.status != 4">
                  <!-- 倒计时显示 -->
                  <view v-if="!countdownFinished" class="countdown-badge">{{ countdownTime }}s</view>
                  <!-- 倒计时结束后显示隐藏按钮 -->
                  <view v-if="countdownFinished && !viewedCards.includes(carmine.id || `${groupIndex}-${cardIndex}`)" class="view-btn" @click.stop="handleCarmineView(carmine, groupIndex, cardIndex)">
                    <image class="copy-icon" src="/static/Images/user/Yincang.png" mode="aspectFit"></image>
                  </view>
                  <!-- 查看成功后显示复制按钮 -->
                  <view v-if="viewedCards.includes(carmine.id || `${groupIndex}-${cardIndex}`)" class="copy-btn" @click.stop="handleCarmineCopy(carmine)">
                    <image class="copy-icon" src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
                  </view>
                </template>
                <!-- status等于4时：直接显示复制按钮 -->
                <template v-else>
                  <view class="copy-btn" @click.stop="handleCarmineCopy(carmine)">
                    <image class="copy-icon" src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
                  </view>
                </template>
              </view>
            </view>
          </view>
        </view>
      </template>
      
      <!-- 激活地址 -->
      <view class="info-item" v-if="orderData && orderData.list && orderData.list.length > 0 && orderData.list[0].charge_address">
        <view class="info-label">兑换地址:</view>
        <view class="info-value">{{ orderData.list[0].charge_address }}</view>
        <view class="action-buttons">
          <view class="copy-btn" @click.stop="handleChargeAddressCopy(orderData.list[0])">
            <image class="copy-icon" src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>

      <view class="info-item">
        <view class="info-label">订单编号:</view>
        <view class="info-value">{{ orderInfo.orderNumber }}</view>
        <view class="copy-btn" style="margin-left: 0.5rem;" @click.stop="copyOrderNumber">
          <image class="copy-icon" src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
        </view>
      </view>
      
      <view class="info-item" v-if="orderInfo.accountNumber">
        <view class="info-label">充值账号:</view>
        <view class="info-value">{{ orderInfo.accountNumber }}</view>
        <view class="action-buttons">
          <view class="copy-btn" @click.stop="copyAccountNumber">
            <image class="copy-icon" src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      
      <view class="info-item">
        <view class="info-label">下单时间:</view>
        <view class="info-value">{{ orderInfo.orderTime }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">付款时间:</view>
        <view class="info-value" :class="{ 'pending-status': !orderInfo.payTime }">{{ orderInfo.payTime || '等待完成' }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">发货时间:</view>
        <view class="info-value" :class="{ 'pending-status': !orderInfo.deliveryTime }">{{ orderInfo.deliveryTime || '等待完成' }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">成交时间:</view>
        <view class="info-value" :class="{ 'pending-status': !orderInfo.completeTime }">{{ orderInfo.completeTime || '等待完成' }}</view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-actions" v-if="orderData">
      <!-- 订单状态为4时显示 -->
      <template v-if="orderData.status == 4 || orderData.status == 5 || orderData.status == 0 || orderData.status == 6 ">
        <view class="action-btn secondary" @click="applyAfterSale">申请售后</view>
        <view class="action-btn primary" @click="buyAgain">再充一笔</view>
      </template>
      
      <!-- 订单状态为2时显示 -->
      <template v-else-if="orderData.status == 2">
        <view class="action-btn secondary" @click="contactService">联系客服</view>
        <view class="action-btn primary" @click="refundNow">立即退款</view>
      </template>
      
      <!-- 订单状态为3时显示 -->
      <template v-else-if="orderData.status == 3 ">
        <view class="action-btn secondary" @click="contactService">联系客服</view>
        <view class="action-btn primary" @click="confirmReceipt">确认收货</view>
      </template>
      <template v-else-if="orderData.status == 1">
        <view class="action-btn secondary" @click="cancelOrder">取消订单</view>
        <view class="action-btn primary" @click="showPaymentModal">立即支付</view>
      </template>
      <template v-else-if="orderData.status == 9">
        <view class="action-btn secondary" @click="contactService">联系客服</view>
      </template>
    </view>
    
    <!-- 支付弹窗 -->
    <Goodsbuy 
      :visible="showPayment" 
      :goodsInfo="{
        title: orderData && orderData.goods_name ? orderData.goods_name : '',
        price: orderData && orderData.amount ? orderData.amount : '',
        stock: '999',
        image: orderData && orderData.goods_image ? orderData.goods_image : ''
      }"
      :accountNumber="orderData && orderData.account ? orderData.account : ''"
      :orderId="orderData && orderData.id ? orderData.id : ''"
      @close="showPayment = false"
      @pay="handlePaymentSuccess"
    />
    
    <!-- 售后申请弹窗 -->
    <AfterSaleModal
      ref="afterSaleModal"
      :visible="showAfterSaleModal"
      :orderNumber="orderInfo.orderNumber"
      :orderId="orderData && orderData.id ? orderData.id : ''"
      @close="showAfterSaleModal = false"
      @submit="handleAfterSaleSubmit"
    />
  </view>
</template>

<script>
import { goodsApi, indexApi, orderApi } from '@/utils/api.js'
import { userStorage } from '@/utils/storage.js';
import Goodsbuy from '@/components/Goodsbuy.vue';
import AfterSaleModal from '@/components/AfterSaleModal.vue';

export default {
  components: {
    Goodsbuy,
    AfterSaleModal
  },
  data() {
    return {
      orderId: null,
      orderData: null,
      showPayment: false,
      showAfterSaleModal: false,
      orderInfo: {
        orderNumber: '',
        accountNumber: '',
        amount: '',
        orderTime: '',
        payTime: '',
        deliveryTime: '',
        completeTime: ''
      },
      // 卡密相关数据
      countdownTime: 30,
      countdownFinished: false,
      countdownTimer: null,
      viewedCards: [], // 记录已查看的卡密ID数组
      viewedCardNos: [], // 记录已查看的卡号ID数组
      statusConfig: {
        0: {
          text: '订单已取消',
          autoReceiveText: '订单已被取消',
          statusImage: '/static/Images/order/Daiwancheng.png'
        },
        1: {
          text: '已创建，等待支付',
          autoReceiveText: '请尽快完成支付',
          statusImage: '/static/Images/order/Daiwancheng.png'
        },
        2: {
          text: '已支付，权益充值中',
          autoReceiveText: '权益充值中，请耐心等待',
          statusImage: '/static/Images/order/Jinxingzhong.svg'
        },
        3: {
          text: '已充值，等待到账',
          autoReceiveText: '权益充值中，请耐心等待',
          statusImage: '/static/Images/order/Jinxingzhong.svg'
        },
        4: {
          text: '订单已完成',
          autoReceiveText: '权益充值成功，订单已完成',
          statusImage: '/static/Images/order/Yiwancheng.png'
        },
        5: {
          text: '待评价',
          autoReceiveText: '请评价订单',
          statusImage: '/static/Images/order/Daiwancheng.png'
        },
      },
      progressSteps: [
        { title: '创建成功，等待支付中', status: 1, time: '' },
        { title: '支付成功，权益充值中', status: 2, time: '' },
        { title: '充值完成，等待到账中', status: 3, time: '' },
        { title: '充值成功，订单已完成', status: 4, time: '' }
      ]
    };
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
      this.fetchOrderDetail();
    }
  },
  onUnload() {
    // 清理倒计时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
      this.countdownTimer = null;
    }
  },
  computed: {
    currentStatus() {
      return this.orderData ? this.orderData.status : 1;
    },
    statusInfo() {
      const config = this.statusConfig[this.currentStatus] || this.statusConfig[1];
      
      // 如果订单已取消，显示特殊的取消进度步骤
      if (this.currentStatus === 0) {
        const canceledSteps = [
          { title: '订单已创建', status: 'completed', time: this.formatTime(this.orderData.create_time) || '' },
          { title: '订单已取消', status: 'canceled', time: this.formatTime(this.orderData.cancel_time) || '已取消' }
        ];
        return {
          ...config,
          progressSteps: canceledSteps
        };
      }
      
      const steps = this.progressSteps.map((step, index) => {
        let stepStatus = 'pending';
        if (step.status <= this.currentStatus) {
          stepStatus = step.status === this.currentStatus ? 'current' : 'completed';
        }
        return {
          ...step,
          status: stepStatus
        };
      });
      return {
        ...config,
        progressSteps: steps
      };
    },
    productInfo() {
      if (this.orderData && this.orderData.list && this.orderData.list.length > 0) {
        return this.orderData.list[0];
      }
      return null;
    }
  },
  methods: {
    async fetchOrderDetail() {
        try {
          const token = userStorage.getToken();
          if (!token) {
            uni.showToast({
              title: '请先登录',
              icon: 'none'
            });
            return;
          }

          const response = await goodsApi.userOrderInfo(this.orderId);

        if (response.code === 1) {
          this.orderData = response.data;
          this.updateOrderInfo();
        } else {
          uni.showToast({
            title: response.msg || '获取订单详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取订单详情失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    },
    updateOrderInfo() {
      if (!this.orderData) return;
      
      const data = this.orderData;
      const productData = this.productInfo;
      
      this.orderInfo = {
        orderNumber: data.order_no || '',
        accountNumber: productData ? productData.accounts : '',
        amount: data.money || '0.00',
        orderTime: this.formatTime(data.create_time),
        payTime: data.start_time ? this.formatTime(data.start_time) : '',
        deliveryTime: data.wuliu_time ? this.formatTime(data.wuliu_time) : '',
        completeTime: data.end_time ? this.formatTime(data.end_time) : ''
      };
      
      // 更新进度时间
      if (this.progressSteps.length >= 1) this.progressSteps[0].time = this.orderInfo.orderTime;
      if (this.progressSteps.length >= 2 && this.orderInfo.payTime) this.progressSteps[1].time = this.orderInfo.payTime;
      if (this.progressSteps.length >= 3 && this.orderInfo.deliveryTime) this.progressSteps[2].time = this.orderInfo.deliveryTime;
      if (this.progressSteps.length >= 4 && this.orderInfo.completeTime) this.progressSteps[3].time = this.orderInfo.completeTime;
      
      // 如果是卡密订单且有卡密数据，且订单状态不是已完成，启动倒计时
      if (data.type == 2 && data.carmines && data.carmines.length > 0 && data.status != 4) {
        this.startCountdown();
      } else if (data.status == 4) {
        // 订单已完成，直接设置倒计时结束状态
        this.countdownFinished = true;
      }
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp * 1000);
      return date.getFullYear() + '-' + 
             String(date.getMonth() + 1).padStart(2, '0') + '-' + 
             String(date.getDate()).padStart(2, '0') + ' ' + 
             String(date.getHours()).padStart(2, '0') + ':' + 
             String(date.getMinutes()).padStart(2, '0') + ':' + 
             String(date.getSeconds()).padStart(2, '0');
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/shop/orderlist'
      });
    },
    copyOrderNumber() {
      uni.setClipboardData({
        data: this.orderInfo.orderNumber,
        success: () => {
          uni.showToast({
            title: '订单编号已复制',
            icon: 'none'
          });
        }
      });
    },
    copyAccountNumber() {
      uni.setClipboardData({
        data: this.orderInfo.accountNumber,
        success: () => {
          uni.showToast({
            title: '充值账号已复制',
            icon: 'none'
          });
        }
      });
    },
    applyAfterSale() {
      this.showAfterSaleModal = true;
    },
    buyAgain() {
      // 获取商品ID
      if (!this.orderData || !this.orderData.list || this.orderData.list.length === 0) {
        uni.showToast({
          title: '无法获取商品信息',
          icon: 'none'
        });
        return;
      }
      
      const goodsId = this.orderData.list[0].goods_id;
      if (!goodsId) {
        uni.showToast({
          title: '商品ID不存在',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到商品详情页面
      uni.navigateTo({
        url: `/pages/goods/goodsdetail?id=${goodsId}`
      });
    },
    
    // 联系客服
    contactService() {
      // 跳转到客服页面或打开客服对话
      uni.navigateTo({
        url: '/pages/common/service'
      });
    },
    
    // 立即退款
    refundNow() {
      // 处理退款逻辑
      uni.showModal({
        title: '确认退款',
        content: '确定要申请退款吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用退款接口
            this.processRefund();
          }
        }
      });
    },
    
    // 确认收货
    confirmReceipt() {
      // 确认收货逻辑
      uni.showModal({
        title: '确认收货',
        content: '确定已收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用确认收货接口
            this.processConfirmReceipt();
          }
        }
      });
    },
    
    // 处理退款
    async processRefund() {
      try {
        uni.showLoading({ title: '处理中...' });
        // 这里调用退款API
        // const result = await api.refundOrder(this.orderDetail.id);
        uni.hideLoading();
        uni.showToast({
          title: '退款申请已提交',
          icon: 'success'
        });
        // 刷新订单详情
        this.fetchOrderDetail();
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '退款申请失败',
          icon: 'error'
        });
      }
    },
    
    // 处理确认收货
    async processConfirmReceipt() {
      try {
        uni.showLoading({ title: '处理中...' });
        
        const result = await goodsApi.confirmOrder({
          order_id: this.orderData.id
        });
        
        uni.hideLoading();
        
        if (result.code === 1) {
          uni.showToast({
            title: '确认收货成功',
            icon: 'success'
          });
          
          // 刷新订单详情
          setTimeout(() => {
            this.fetchOrderDetail();
          }, 1000);
        } else {
          uni.showToast({
            title: result.msg || '确认收货失败',
            icon: 'error'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('确认收货失败:', error);
        uni.showToast({
          title: '确认收货失败',
          icon: 'error'
        });
      }
     },
     
     // 显示支付弹窗
     showPaymentModal() {
       this.showPayment = true;
     },
     
     // 处理支付成功
     handlePaymentSuccess(paymentData) {
       console.log('支付成功:', paymentData);
       this.showPayment = false;
       
       uni.showToast({
         title: '支付成功',
         icon: 'success'
       });
       
       // 刷新订单详情
       setTimeout(() => {
         this.fetchOrderDetail();
       }, 1500);
     },
     
     // 取消订单
     cancelOrder() {
       uni.showModal({
         title: '确认取消',
         content: '确定要取消此订单吗？',
         success: (res) => {
           if (res.confirm) {
             this.processCancelOrder();
           }
         }
       });
     },
    
    // 处理取消订单
    async processCancelOrder() {
      try {
        uni.showLoading({ title: '处理中...' });
        
        const result = await goodsApi.orderCancel({
          order_id: this.orderData.id
        });
        
        uni.hideLoading();
        
        if (result.code === 1) {
          uni.showToast({
            title: '订单已取消',
            icon: 'success'
          });
          
          // 刷新订单详情
          setTimeout(() => {
            this.fetchOrderDetail();
          }, 1000);
        } else {
          uni.showToast({
            title: result.msg || '取消订单失败',
            icon: 'error'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('取消订单失败:', error);
        uni.showToast({
          title: '取消订单失败',
          icon: 'error'
        });
      }
     },
     
     // 处理售后申请提交
     async handleAfterSaleSubmit(submitData) {
       console.log('orderdetail: 收到售后申请提交', submitData);
       
       try {
         uni.showLoading({ title: '提交中...' });
         
         // 调用售后申请接口（图片已在组件中上传完成）
         const result = await orderApi.objectionOrder({
           order_id: submitData.order_id,
           content: submitData.content,
           image: submitData.image || ''
         });
         
         console.log('orderdetail: 售后申请接口返回', result);
         
         uni.hideLoading();
         
         if (result.code === 1) {
           uni.showToast({
             title: '售后申请提交成功',
             icon: 'success'
           });
           
           // 关闭弹窗
           this.showAfterSaleModal = false;
           
           // 刷新订单详情
           setTimeout(() => {
             this.fetchOrderDetail();
           }, 1500);
         } else {
           uni.showToast({
             title: result.msg || '提交失败，请重试',
             icon: 'none'
           });
         }
       } catch (error) {
         uni.hideLoading();
         console.error('售后申请提交失败:', error);
         uni.showToast({
           title: error.message || '提交失败，请重试',
           icon: 'none'
         });
       } finally {
         // 通过 ref 重置 AfterSaleModal 的提交状态
         try {
           if (this.$refs?.afterSaleModal && this.$refs.afterSaleModal.hasOwnProperty('isSubmitting')) {
             this.$refs.afterSaleModal.isSubmitting = false;
           }
         } catch (error) {
           console.error('重置售后模态框状态失败:', error);
         }
       }
     },
     
     // 卡密相关方法
     // 开始倒计时
     startCountdown() {
       if (this.countdownTimer) {
         clearInterval(this.countdownTimer);
       }
       
       this.countdownTime = 30;
       this.countdownFinished = false;
       
       this.countdownTimer = setInterval(() => {
         this.countdownTime--;
         if (this.countdownTime <= 0) {
           this.countdownFinished = true;
           clearInterval(this.countdownTimer);
           this.countdownTimer = null;
         }
       }, 1000);
     },
     
     // 卡密显示工具函数
     maskCardInfo(cardInfo) {
       if (!cardInfo || cardInfo.length <= 4) return cardInfo;
       const start = cardInfo.substring(0, 2);
       const end = cardInfo.substring(cardInfo.length - 2);
       const middle = '*'.repeat(Math.min(6, cardInfo.length - 4));
       return start + middle + end;
     },
     
     // 获取显示的卡密信息
     getDisplayCardInfo(carmine, isViewed = false, fieldType = 'carmine') {
       let cardInfo = '';
       if (fieldType === 'card_no') {
         cardInfo = carmine.card_no || '';
       } else {
         cardInfo = carmine.carmine || '';
       }
       
       // 如果订单状态为4，直接显示完整信息
       if (this.orderData && this.orderData.status == 4) {
         return cardInfo;
       }
       
       return isViewed ? cardInfo : this.maskCardInfo(cardInfo);
     },
     
     // 处理查看卡号（卡号直接显示，无需查看按钮）
     handleCardNoView(carmine, groupIndex, cardIndex) {
       const cardId = carmine.id || `${groupIndex}-${cardIndex}`;
       if (!this.viewedCardNos.includes(cardId)) {
         this.viewedCardNos.push(cardId);
         uni.showToast({
           title: '已显示完整卡号',
           icon: 'success',
           duration: 1500
         });
       }
     },
     
     // 处理复制卡号
     handleCardNoCopy(carmine) {
       const copyData = carmine.card_no || '';
       
       if (copyData) {
         uni.setClipboardData({
           data: copyData,
           success: () => {
             uni.showToast({
               title: '卡号复制成功',
               icon: 'success'
             });
           },
           fail: () => {
             uni.showToast({
               title: '复制失败',
               icon: 'error'
             });
           }
         });
       }
     },
     
     // 处理查看卡密
     async handleCarmineView(carmine, groupIndex, cardIndex) {
       const cardId = carmine.id || `${groupIndex}-${cardIndex}`;
       if (!this.viewedCards.includes(cardId)) {
         try {
           // 调用接口获取卡密信息
           const response = await orderApi.getCarmines(this.orderData.id);
           
           if (response && response.data) {
             // 更新卡密数据
             this.orderData.carmines = response.data;
             
             // 将所有卡密标记为已查看（一个订单的所有卡密一次性显示）
             if (this.orderData.carmines && this.orderData.carmines.length > 0) {
               this.orderData.carmines.forEach((carmineGroup, gIndex) => {
                 if (Array.isArray(carmineGroup)) {
                   carmineGroup.forEach((carmineItem, cIndex) => {
                     const itemId = carmineItem.id || `${gIndex}-${cIndex}`;
                     if (!this.viewedCards.includes(itemId)) {
                       this.viewedCards.push(itemId);
                     }
                   });
                 }
               });
             }
             
             uni.showToast({
               title: '已显示全部卡密信息',
               icon: 'success',
               duration: 1500
             });
           }
         } catch (error) {
           console.error('获取卡密失败:', error);
           uni.showToast({
             title: error.message || '获取卡密失败',
             icon: 'error',
             duration: 2000
           });
         }
       }
     },
     
     // 处理复制卡密
     handleCarmineCopy(carmine) {
       // 尝试多种可能的字段名来获取卡密数据
       const copyData = carmine.carmine || carmine.card_password || carmine.password || carmine.secret || '';
       
       if (copyData) {
         uni.setClipboardData({
           data: copyData,
           success: () => {
             uni.showToast({
               title: '卡密复制成功',
               icon: 'success'
             });
           },
           fail: () => {
             uni.showToast({
               title: '复制失败',
               icon: 'error'
             });
           }
         });
       } else {
         console.log('卡密对象结构:', carmine);
         uni.showToast({
           title: '卡密数据为空',
           icon: 'error'
         });
       }
     },
     
     // 处理复制激活地址
     handleChargeAddressCopy(listItem) {
       const copyData = listItem.charge_address || '';
       
       if (copyData) {
         uni.setClipboardData({
           data: copyData,
           success: () => {
             uni.showToast({
               title: '激活地址复制成功',
               icon: 'success'
             });
           },
           fail: () => {
             uni.showToast({
               title: '复制失败',
               icon: 'error'
             });
           }
         });
       }
     },
      
      // 获取状态图标
       getStatusIcon(status) {
         const iconMap = {
           'pending': '/static/Images/order/Daiwancheng.png',
           'current': '/static/Images/order/Yiwancheng.png',
           'completed': '/static/Images/order/Yiwancheng.png',
           'canceled': '/static/Images/order/Yiquxiao.png'
         };
         return iconMap[status] || iconMap['pending'];
       }
  }
};
</script>

<style lang="scss" scoped>
.order-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.page-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333333;
  text-align: center;
}

.placeholder {
  width: 60rpx;
}

/* 订单状态卡片 */
.order-status-card {
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-info {
  flex: 1;
}

.status-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}

.auto-receive-text {
  font-size: 26rpx;
  color: #ff4d4f;
}

.delivery-image {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.delivery-image.status-animating {
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* 充值进度卡片 */
.recharge-progress-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.progress-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  position: relative;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-item::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 50rpx;
  width: 2rpx;
  height: calc(100% + 10rpx);
  background-color: #e0e0e0;
  z-index: 1;
}

.progress-item:last-child::before {
  display: none;
}

.progress-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  position: relative;
  z-index: 2;
}

.status-icon {
  width: 40rpx;
  height: 40rpx;
}

.progress-item.current .status-icon {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.progress-content {
  flex: 1;
}

.progress-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 6rpx;
}

.progress-time {
  font-size: 24rpx;
  color: #999999;
}

.progress-item.completed .progress-icon {
  background-color: #f6ffed;
}

.progress-item.current .progress-icon {
  background-color: #fff7e6;
}

.progress-item.pending .progress-icon {
  background-color: #f5f5f5;
}

.progress-item.canceled .progress-icon {
  background-color: #fff2f0;
}

.progress-item.canceled .progress-title {
  color: #ff4d4f;
}

.progress-item.canceled .progress-time {
  color: #ff4d4f;
}

/* 商品信息卡片 */
.product-info-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.product-name {
  font-size: 36rpx;
  color: #333333;
  line-height: 1.5;
}

/* 订单信息卡片 */
.order-info-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

/* 状态图片容器 */
.status-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 100px;
}

.delivery-image {
  height: inherit;
  width: 145px;
}

/* 商品信息容器 */
.product-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #f5f5f5;
}

.product-thumb {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.info-item {
  display: flex;
  align-items: center;
  height: 2rem;
  border-bottom: 1rpx solid #d0cece;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  width: 4rem;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
  width: 6rem;
}

.info-value.price {
  color: #ff4d4f;
  font-weight: 500;
}

.info-value.pending-status {
  color: #999999;
}

.view-btn,
.copy-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.view-btn:active,
.copy-btn:active {
  transform: scale(0.95);
  background: #e0e0e0;
}

.view-btn image,
.copy-btn image,

/* 卡密信息展示样式 */
.card-info-section {
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24rpx;
  padding-left: 8rpx;
  border-left: 4rpx solid #ff4d4f;
}

.card-group:last-child {
  margin-bottom: 0;
}

.card-item {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border: 1rpx solid #e8eaff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.card-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-item:last-child {
  margin-bottom: 0;
}

.card-item .info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.card-item .info-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.card-item .info-label {
  font-size: 28rpx;
  color: #666666;
  width: 140rpx;
  flex-shrink: 0;
  font-weight: 500;
}

.card-item .info-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
  margin-right: 16rpx;
  word-break: break-all;
  line-height: 1.4;
}

.card-secret {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  // padding: 8rpx 12rpx;
  // border-radius: 8rpx;
  // border: 1rpx solid #e9ecef;
  letter-spacing: 1rpx;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 12rpx;
  min-width: 60rpx;
  justify-content: flex-end;
}

/* 倒计时显示样式 */
.countdown-badge {
  background: #ff4757;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 600;
  margin-left: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rpx;
  min-width: 60rpx;
}

.copy-btn, .view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  border-radius: 8rpx;
  transition: all 0.2s ease;
}

.copy-btn:hover, .view-btn:hover {
  background-color: #e9ecef;
  transform: scale(1.05);
}

.copy-btn:active, .view-btn:active {
  transform: scale(0.95);
}

.copy-icon{
  width: 32rpx;
  height: 32rpx;
  display: block;
  margin-bottom: 2rem;
}

/* 倒计时提示样式 */
.countdown-notice {
  background: linear-gradient(135deg, #fff7e6 0%, #fffbf0 100%);
  border: 1rpx solid #ffd591;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
  margin-top: 24rpx;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.countdown-notice::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.countdown-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #fa8c16;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
}

.countdown-text::before {
  content: '⏰';
  font-size: 28rpx;
}

.countdown-desc {
  font-size: 24rpx;
  color: #ad6800;
  line-height: 1.4;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .card-item {
    padding: 20rpx;
  }
  
  .card-item .info-label {
    width: 120rpx;
    font-size: 26rpx;
  }
  
  .card-item .info-value {
    font-size: 26rpx;
  }
  
  .section-title {
    font-size: 30rpx;
  }
  
  .countdown-text {
    font-size: 28rpx;
  }
  
  .countdown-desc {
    font-size: 22rpx;
  }
}

@media screen and (max-width: 600rpx) {
  .card-item .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8rpx;
  }
  
  .card-item .info-label {
    width: auto;
  }
  
  .card-item .info-value {
    margin-right: 0;
    width: 100%;
  }
  
  .action-buttons {
    align-self: flex-end;
    margin-top: 8rpx;
  }
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin: 0 10rpx;
}

.action-btn.primary {
  background-color: #ff4d4f;
  color: #ffffff;
}

.action-btn.secondary {
  background-color: #ffffff;
  color: #333333;
  border: 1rpx solid #dddddd;
}
</style>